<html>
    <head>
        <title>Promise</title>

        <script type="text/javascript">

            //1. 定义WFS的getFeature的URL服务地址
            let url = "http://127.0.0.1/geoserver/radi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=radi%3Acities&maxFeatures=50&outputFormat=application%2Fjson";
            
            // function onPromise(){

            //     //2. 创建Promise对象
            //     let promise = new Promise(function(resolve, reject){
            //         //2.1 发送getFeature请求
            //         fetch(url)
            //         //2.2 接收getFeature请求返回结果
            //         .then(function(response){
            //             //2.3 设置promise的状态为fullfiled
            //             return resolve(response.json());
            //         })
            //     });

            //     //3. 处理异步请求结果
            //     promise.then(function(response){
            //         //3.1 返回geojson的features数组
            //         return response.features;
            //     }).then(function(features){
            //         //3.2 返回features数组的长度
            //         return features.length;
            //     }).then(function(count){
            //         //3.3 输出features的元素个数
            //         console.log(count);
            //     }).catch(function(err){
            //         //3.4 捕获异常，输出异常信息
            //         console.log(err);
            //     }).finally(function(){
            //         //3.5 调用fianlly，输出结束信息
            //         console.log("over");
            //     });
            // }

            function onPromise(){

                let promise = new Promise(function(resolve, reject){
                    fetch(url)
                    .then(function(response){
                        return resolve(response.json());
                    })
                });

                promise
                .then(response => response.features)
                .then(features => features.length)
                .then(count => console.log(count))
                .finally(err => console.log(err))
                .finally(() => console.log("over"));
            }
        </script>
    </head>
    <body>
        <input type="button" value="Promise" onclick="onPromise()">
    </body>
</html>